<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> <!-- 索引值（下标）是0 -->
		<title></title><!-- 索引值（下标）是1 -->
		<style type="text/css">
			div{height: 100px;background-color: #000;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//console.log('div-head');
				//console.dir(document.getElementById('div'));
				//document.getElementById('div').style.backgroundColor = 'red';

			}
		</script>
	</head>
	<body>
		<div id="div" class="div-1">123</div><!-- 索引值（下标）是0 -->
		<div class="div-1">456</div>
		<span id="span" class="span-1">099</span><!-- 索引值（下标）是1 -->
		<a href="##"></a><!-- 索引值（下标）是2 -->
		<script type="text/javascript">// 索引值（下标）是3
			var a = {name:'abc'};
			//console.log(a.name); // 'abc'
			//console.log(a['name']); // 'abc'
			console.log(a[name]); // undefined 这里 name 是一个变量，变量没有赋值的时候 ，默认值是 undefined
			var b;
			console.log('b:'+b);

			// 我就是要用变量去获取属性值 a[name] 去获取
			var name = 'qwer';
			console.log('name2:' + a[name]); // name2:undefined 这里的 name = 'qwer';

			var name = 'name'; // 同名变量会覆盖，一般来说，后面的会覆盖前面的
			console.log('name3:' + a[name]); // 此时的 name = 'name' 字符串 a[name] = a['name']

			//window.alert(1); // 完整的写法
			//alert(1); // alert() 是window 对象的一个直接方法，可以直接使用，不用写 window 对象名。

			var c = document.getElementsByClassName('div-1')[0];
			console.log('-------c------');
			console.dir(c);
			var d = document.querySelector('body .div-1');
			console.log('-------d------');
			console.dir(d);
			var e  = document.querySelectorAll('body .div-1');
			console.log('-------e------');
			console.dir(e);

			function f1(x,y){ // x和y，相当于函数的局部变量，函数中的同名形参，不会冲突
				return x + y;
			}
			function f2(x,y){
				return x - y;
			}
			var result = f1(1,2) + f2(5,2);
			var result1 = f1(f2(5,2),2);
			console.log('result1:');
			console.log(result1);

			function f3(a,b){
				console.dir(arguments); // arguments 函数的参数
				console.log('caller:');
				console.dir(f3.caller); // 来电，是谁调用我的，这里函数 f4
			}
			//f3.name1 = 'f33'; // 函数本身，也是对象，那么函数，可以通过 . 点号设置一个属性和值
			console.log('f3:');
			console.dir(f3);
			//f3(3,4);
			function f4(){
				f3(3,4,5,6);
			}
			f4();

			console.log('-----------愉快的分割线------------');
			function f5(){
				console.dir(arguments);
				var sum = 0;
				for(var i = 0;i < arguments.length;i++){
					sum += arguments[i];
				}
				return sum;
			}
			var result2 = f5(1,2,3,4,5);
			console.log(result2);

			// console.dir() 一般用来打印复合数据 数组，对象 
			// console.log() 一般用来打印基础数据 数字，字符串，布尔值，null，undefined

			// 实现一个函数，返回不固定数量的数字参数的所有值之和

			function f6(a,b){
				return a + b;
			}
			console.log('f6:');
			console.log(f6(1,2,3));

			console.log('-----------愉快的分割线------------');
			function Human(){
				var hander = 2;
				this.eye = 'circle';
				this.foot = 2;
			}
			Human.prototype = {
				mouse:'嘴巴',
				run:function (){
					console.log('跑步');
				},
				eat:function (){
					console.log('吃饭');
				}
			}
			var chinese = new Human(); // chinese 就是一个具体的对象 Human 是一个 [构造函数]
			// 构造函数，相当于是一个模板，是用来创造实际使用的事物的。实际事物，叫做构造函数的 [实例]
			// [实例] 是一个具体的对象，可以使用对象的操作方法去操作。

			// new 操作的本质
			//1.var chinese = {};
			//2.chinese.__proto__ = Human.prototype;
			//3.Human的 this 指定的值，一一赋值给 chinese chinese = {eye:'circle',foot:2,__proto__:Human.prototype};

			// 原型继承 和 传统的面向对象继承的区别
			// 面向对象继承：所有属性和方法，都复制一遍。
			// 原型继承：实例对象，可以使用构造的方法，不需要复制。

			console.dir(chinese);
			chinese.run();
			console.log(chinese.eye);
			console.log('chinese.__proto__ 是否等于 Human.prototype');
			console.log(chinese.__proto__ === Human.prototype);

			console.log('直接使用 Human 的 run 方法');
			Human.prototype.run();


		</script>
	</body>
</html>